var h = 200;
var w = 700;
var barpadding = 20;
var margin = 20;


function getDim(Data){
	dataset = Data.map(function(d){ return d.value});
	date_data = Data.map(function(d){ return d.date});

	var dim = {};
	dim.x = d3.scale.ordinal()
					.domain(date_data)
					.rangeRoundBands([0,w],0.5);
	dim.y = 	d3.scale.linear()
					.domain([0,d3.max(dataset)])
					.rangeRound([0,h- margin *2])
					.clamp(true);
	return dim
}

function getScale(rect,dataset){
	var w = rect[0];
	var h = rect[1];

	
	
    return [xScale,yScale];
}


function addLineBySvg(svg,Data,dim,height_exe,color){

	
	dataset = Data.map(function(d){ return d.value});
	date_data = Data.map(function(d){ return d.date});

	
	var	yScale = d3.scale.linear()
						.domain([0,d3.max(dataset)])
						.clamp(true)
						.range([0,h]);


	var data = Data.map(function(d,i){
		return {
			x: dim.x(d.date),
			y: h- dim.y(d.value) -height_exe ,
		};
	})
	var line = d3.svg.line()
					.x(function(d){
						return d.x;
					})
					.y(function(d){
						console.log(d.y);
						return d.y;
					});


	svg.append('path')
    		.attr({
      			'd': line(data),
      			'y': data.map(function(d){
      				return h- d.value;
      			}),
      			'stroke': 'red',
      			'stroke-width': '2px',
      			'fill': 'none'
    		});


	// if (color != null){
	// 	line.attr("fill",color);
	// }

    return svg;
}


function addNewLineBySvg(ele,dataset){
	var h = 100;
	var w = 500;
	var barpadding = 14;

	var	xScale = d3.scale.linear()
						.domain([0,d3.max(dataset)])
						.range([0,w]);
	

	var	yScale = d3.scale.linear()
						.domain([0,d3.max(dataset)])
						.clamp(true)
						.rangeRound([0,h-30]);



	var svg = d3.select(ele).append("svg")
							.attr('width',w)
							.attr("height",h);
	svg =  addLineBySvg(svg,dataset,5);

	var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom");
                  
    var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("right")
                  .ticks(5);

 	svg.append("g")
 		.attr("class","axis")
 		.attr("transform", "translate(10," + h-10  + ")")
 		.call(xAxis);

 	svg.append("g")
 		.attr("class","axis")

 		.call(yAxis);

 	return svg;

}

function addBarBySvg(ele,Data ,if_draw_line){
	var h = 200;
	var w = 700;
	var barpadding = 20;
	var margin = 20;

	date_data = Data.map(function(d) { return d.date ;})
	dataset = Data.map(function(d){ return d.value; })

	var x = d3.scale.ordinal()
					.domain(date_data)
					.rangeRoundBands([0,w],0.5);

	var y = d3.scale.linear()
					.domain([0,d3.max(dataset)])
					.rangeRound([0,h- margin *4])
					.clamp(true);

	var svg = d3.select(ele).append("svg")
							.attr('width',w)
							.attr("height",h);

	// var	xScale = d3.scale.linear()
	// 					.domain([0,d3.max(dataset)])
	// 					.range([1421756656,1421856656]);
	

	// var	yScale = d3.scale.linear()
	// 					.domain([0,d3.max(dataset)])
	// 					.clamp(true)
	// 					.rangeRound([0,h-30]);


	var last_value = 20;
	svg.selectAll("rect").data(Data).enter().append("rect")
						 .attr("x",function(d,i){
						 	return  x(d.date) ;
						 })
						 .attr("y",function(data){
						 	return   h - y( data.value ) -margin;
						 })
						 .attr("width",w/ dataset.length - barpadding)
						 // .attr("height",function (data){
						 // 	return y( data.value );
						 // })
						 .attr("height",0)
						 .on("mouseover",function(d,i){
						 	color_v = d3.select(this).attr("fill");
							d3.select(this).attr("wait_fill",color_v);

							d3.select(this)
								.attr("fill","rgb(202,77,143)");
						 })
						 .on("mouseout",function(d,i){
							color_v = d3.select(this).attr("wait_fill");

							d3.select(this)
								.transition().duration(600)
								.attr("fill",color_v)
								.attr("wait_fill",null);

						 });
						 // .attr("fill",function(d){
						 // 	console.log( y(d )) ;
						 // 	return "rgb( 0, 0," + y(d.value) % 255 + ")";
						 // });
	svg.selectAll("rect").transition().duration(1500)
						.attr("height",function(d,i){
							return y(d.value);
						})
						.attr("fill",function(d){
							
							if (d.value >last_value){
								color_v = "rgb(239,77,77)";	
							}else{
								
								color_v = "rgb( 139,192,120) ";	
							}
							last_value = d.value; 
						 	return color_v;	
						 });

						


	// svg.selectAll("text").data(dataset)
	// 					 .enter()
	// 					 .append("text")
	// 					 .text(function(data){
	// 					 	return data;
	// 					 })
	// 					 .attr("x",function (data,i){
	// 					 	return i * w/dataset.length +5;
	// 					 })
	// 					 .attr("y",function(data){
	// 					 	return h- yScale(data)+10;
	// 					 })
	// 					 .attr("fill",'white');

	// var x = d3.scale
	// 			.ordinal()
	// 			.rangeRoundBands([0, w],0.5)
 //    			.domain(d3.range(d3.max(dataset)));
    		
    // var x = d3.scale.ordinal().rangeRoundBands([0, w], 0.1)
    //             .domain(fD.map(function(d) { return d[0]; }));

						 
	var xAxis = d3.svg.axis()
					.scale(x)
    				.orient("bottom")

    // var xAxis = d3.svg.axis()
    //               .scale(xScale)
    //               .orient("bottom")
    //               // .ticks(dataset.length)
    //               // .tickFormat(d3.time.format('%I %p'))
    //               .tickValues(["20",4,6,8,10,12])
    //               // .tickValues(["2014-12-28","2015-1-6","2015-2-10","2015-2-25","2015-3-1","2015-3-25"])
    //               ;

                  
    var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("right")
                  .ticks(5);

 	svg.append("g")
 		.attr("class","axis")
 		.attr("transform", "translate(10, 180 )")
 		.call(xAxis);

 	// svg.append("g")
 	// 	.attr("class","axis")

 	// 	.call(yAxis);

 	return svg ;

}


function addDistributedBySvg(ele,dataset){
	var h = 200;
	var w = 500;
	var svg = d3.select(ele).append("svg")
							.attr("width",w)
							.attr("height",h);

	svg.selectAll("circle").data(dataset).enter().append("circle")
							.attr("cx",function(d){
								return d[0];
							})
							.attr("cy",function(d){
								return d[1];
							})
							.attr("r",5);

}